<AlertBanner
  @type="warning"
  @message="Vault is sealed"
  @yieldWithoutColumn={{true}}
  class="is-marginless"
>
  <div class="is-flex is-flex-v-centered">
    <div>
    <span class="message-title">Warning</span> Vault is sealed
    </div>
  </div>
</AlertBanner>
{{#if this.showJoinForm}}
  <div class="box is-marginless is-shadowless">
    <h2 class="title is-5" data-test-join-header>
      Join an existing Raft cluster
    </h2>
    <EditForm
      @model={{compute (action "newModel")}}
      @saveButtonText="Join"
      @cancelButtonText="Back"
      @onCancel={{action (mut this.showJoinForm) false}}
      @onSave={{transition-to "vault.cluster.unseal"}}
      @flashEnabled={{false}}
      @includeBox={{false}}
    />
  </div>
{{else}}
  <form onsubmit={{action "advanceFirstScreen" }} data-test-join-choice>
    <div class="box is-marginless is-shadowless">
      <h2 class="title is-6">
        This server is configured to use Raft Storage.
        <br />
        <br />
        How do you want to get started?
      </h2>
      <RadioButton
        @value="join"
        @groupValue={{this.preference}}
        @changed={{action (mut this.preference) }}
        @name="setup-pref"
        @radioId="join"
        @classNames="vlt-radio is-block"
      >
        <label for="join" />
        Join an existing Raft cluster
      </RadioButton>
      <RadioButton
        @value="init"
        @groupValue={{this.preference}}
        @changed={{action (mut this.preference) }}
        @name="setup-pref"
        @radioId="init"
        @classNames="vlt-radio is-block"
      >
        <label for="init" data-test-join-init />
        Create a new Raft cluster
      </RadioButton>
    </div>
    <div class="box is-marginless is-shadowless">
      <button type="submit" class="button is-primary" data-test-next>
        Next
      </button>
    </div>
  </form>
{{/if}}